<div class="address-book-page">
  <div class="container-fluid main">

    <div class="row">
      <div class="col-sm-9">
        <h2>{{ 'ADDRESS_BOOK_TITLE' | translate }}</h2>
      </div>
    </div>

    <div class="row">
      <div class="col-sm-3 sidebar">
          <!-- <div class="panel-heading">
            <h3>{{ 'ADDRESS_BOOK_NAVIGATION' | translate }}</h3>
          </div> -->
          <div class="panel-body">
            <ul class="nav nav-pills nav-stacked">
              <li>
                <button type="button" class="btn btn-success" ng-click="$ctrl.addContact()">{{ 'ADDRESS_BOOK_NEW' | translate }}</button>
              </li>
              <li>
                <button type="button" ng-disabled="!$ctrl.contacts.length" class="btn btn-success" ng-click="$ctrl.exportAddressBook()">{{ 'ADDRESS_BOOK_EXPORT_BTN' | translate }}</button>
                <a id="exportAddressBook" class="hidden" target="_blank"></a>
              </li>
              <li>
                <button type="button" class="btn btn-success" ng-click="$ctrl.uploadAddressBook()">{{ 'ADDRESS_BOOK_IMPORT_BTN' | translate }}</button>
                <input id="uploadAddressBook" accept=".adb" style="visibility:hidden;position:absolute;" import-address-book-file="$ctrl.importAddressBook($fileContent)" type="file">
              </li>
            </ul>
          </div>
      </div>

      <div class="col-sm-9">
          <div class="panel-heading">
            <h3>{{ 'ADDRESS_BOOK_LIST' | translate }}</h3>
            <div ng-show="$ctrl.contacts.length > $ctrl.pageSize"><button class="buttonStyle" ng-disabled="$ctrl.currentPage == 0" ng-click="$ctrl.currentPage = $ctrl.currentPage-1"><span class="fa fa-chevron-left" aria-hidden="true"></span></button><b>{{$ctrl.currentPage+1}}/{{$ctrl.numberOfPages()}}</b><button class="buttonStyle" ng-disabled="$ctrl.currentPage+1 >= $ctrl.numberOfPages()" ng-click="$ctrl.currentPage = $ctrl.currentPage+1"> <span class="fa fa-chevron-right" aria-hidden="true"></span></button></div>
          </div>
          <table  class="table table-condensed">
            <thead>
            <tr>
              <th>
                <a href="javascript:;" ng-click="$ctrl.sortBy('label')">
                  <i class="fa" ng-show="$ctrl.propertyName === 'label'" ng-class="{'fa-caret-down': $ctrl.revers, 'fa-caret-up': !$ctrl.revers}"></i>&nbsp;&nbsp;{{ 'ADDRESS_BOOK_CONTACT_LABEL' | translate }}
                </a>
              </th>
              <th>{{ 'ADDRESS_BOOK_ACCOUNT_ADDRESS' | translate }}</th>
              <th>{{ 'ADDRESS_BOOK_ACTIONS' | translate }}</th>
            </tr>
            </thead>
            <tbody>
            <tr ng-repeat="contact in $ctrl.contacts | orderBy:$ctrl.propertyName:$ctrl.revers | startFrom:$ctrl.currentPage*$ctrl.pageSize | limitTo:$ctrl.pageSize">
              <td>{{contact.label}}</td>
              <td>{{contact.address}}</td>
              <td class="actions row">
                <div class="col-sm-4 inner">
                  <button type="button" class="btn btn-xs btn-success" ng-click="$ctrl.transferTransaction(contact.address)">{{ 'GENERAL_SEND_XEM' | translate }}</button>
                </div>
                <div class="col-sm-4">
                  <button type="button" class="btn btn-xs btn-success" ng-click="$ctrl.editContact(contact)">{{ 'GENERAL_EDIT' | translate }}</button>
                </div>
                <div class="col-sm-4 inner">
                  <button type="button" class="btn btn-xs btn-success" ng-click="$ctrl.removeContact(contact)">{{ 'GENERAL_REMOVE' | translate }}</button>
                </div>
              </td>
            </tr>
            </tbody>
          </table>
          <div class="panel-body" ng-show="!$ctrl.contacts.length">
            <p>{{ 'GENERAL_NO_RESULTS' | translate }}</p>
          </div>
          <!-- <div class="text-center bg-info">
            <small><b><i>{{ 'ADDRESS_BOOK_MAX_NUMBER' | translate }} {{ $ctrl.pageSize }}</i></b></small>
          </div> -->
      </div>
    </div>
  </div>
</div>

<!-- Add new account modal -->
<div id="contactModal" class="modal fade" role="dialog">
  <div class="modal-dialog modal-sm" role="document">
    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h3 class="modal-title" ng-show="!$ctrl.is_edit">{{ 'ADDRESS_BOOK_NEW' | translate }}</h3>
        <h3 class="modal-title" ng-show="$ctrl.is_edit">{{ 'ADDRESS_BOOK_EDIT' | translate }}</h3>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-sm-12">
            <fieldset class="form-group">
              <div class="input-group">
                <span class="input-group-btn">
                  <label>{{ 'ADDRESS_BOOK_CONTACT_LABEL' | translate }}: </label>
                </span>
                <input class="form-control"
                  type="text"
                  placeholder="{{ 'ADDRESS_BOOK_CONTACT_LABEL' | translate }}"
                  ng-model="$ctrl.formData.label"/>
              </div>
            </fieldset>
            <fieldset class="form-group">
              <div class="input-group">
                <span class="input-group-btn">
                  <label>{{ 'FORM_ADDRESS_FIELD_PLACEHOLDER' | translate }}: </label>
                </span>
                <input class="form-control"
                  type="text"
                  placeholder="{{ 'FORM_ADDRESS_FIELD_PLACEHOLDER' | translate }}"
                  ng-model="$ctrl.formData.address"/>
              </div>
            </fieldset>
            <!-- PASSWORD FIELD -->
            <fieldset class="form-group">
              <div class="input-group">
                <span class="input-group-btn">
                  <label>{{ 'FORM_PASSWORD' | translate }}:</label>
                </span>
                <input class="form-control" type="password" placeholder="{{ 'FORM_PASSWORD_FIELD_PLACEHOLDER' | translate }}" ng-model="$ctrl.common.password" />
              </div>
            </fieldset>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <!-- <button type="button" class="btn btn-success"  data-dismiss="modal">{{ 'GENERAL_CLOSE' | translate }}</button> -->
        <button class="btn btn-success" type="submit" ng-show="!$ctrl.is_edit" ng-disabled="$ctrl.okPressed || !$ctrl.common.password.length || !$ctrl.formData.label || !$ctrl.formData.address" ng-click="$ctrl.add()">
          <i class="fa fa-plus"></i> {{ 'ADDRESS_BOOK_NEW_BTN' | translate }}
        </button>
        <button class="btn btn-success" type="submit" ng-show="$ctrl.is_edit" ng-disabled="$ctrl.okPressed || !$ctrl.common.password.length || !$ctrl.formData.label || !$ctrl.formData.address" ng-click="$ctrl.edit()">
          <i class="fa fa-edit"></i> {{ 'ADDRESS_BOOK_EDIT_BTN' | translate }}
        </button>
      </div>
    </div>
  </div>
</div>

<!-- Add new account modal -->
<div id="removeContactModal" class="modal fade" role="dialog">
  <div class="modal-dialog modal-sm" role="document">    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h3 class="modal-title">{{ 'ADDRESS_BOOK_REMOVE' | translate }}</h3>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-sm-12">
            <h5>{{ 'ADDRESS_BOOK_CONFIRM_DELETE' | translate }}</h5>
            <fieldset class="form-group">
              <div class="input-group">
                <span class="input-group-btn">
                  <label>{{ 'FORM_PASSWORD' | translate }}:</label>
                </span>
                <input class="form-control" type="password" placeholder="{{ 'FORM_PASSWORD_FIELD_PLACEHOLDER' | translate }}" ng-model="$ctrl.common.password" />
              </div>
            </fieldset>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <!-- <button type="button" class="btn btn-success"  data-dismiss="modal">{{ 'GENERAL_CLOSE' | translate }}</button> -->
        <button class="btn btn-danger" type="submit" ng-disabled="$ctrl.okPressed || !$ctrl.common.password.length" ng-click="$ctrl.remove()">
          <i class="fa fa-remove"></i> {{ 'ADDRESS_BOOK_REMOVE_BTN' | translate }}
        </button>
      </div>
    </div>
  </div>
</div>
